<!-- 布局首页 -->

<template>
  <a-layout class="layout-demo vaw-layout-container">
    <a-layout-sider collapsible breakpoint="xl">
      <ScrollerMenu />
    </a-layout-sider>
    <!-- <a-layout> -->
    <div class="vaw-main-layout-container" style="padding-top: 186px">
      <section
        style="padding-left: 10px"
        class="nav-bar-open-status fixed-nav-bar"
      >
        <navBar />
        <TabBar />
      </section>
      <div>
        <div class="p-5px">
          <section class="main-section p-5px">
            <router-view></router-view>
          </section>
        </div>
      </div>
    </div>

    <!-- </a-layout> -->
  </a-layout>
</template>

<script setup>
import ScrollerMenu from './sideBar/components/ScrollerMenu.vue'
import navBar from './navBar/index.vue'
import TabBar from './tabbar/index.vue'

// import { Message } from '@arco-design/web-vue'

// function onClickMenuItem(key) {
//   Message.info({ content: `You select ${key}`, showIcon: true })
// }
</script>

<style lang="less">
.vaw-layout-container {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  .mobile-shadow {
    display: none;
  }
  .layout-mode-ttb {
    margin-top: @logoHeight;
    transition: all @transitionTime;
  }
}
.is-mobile {
  .mobile-shadow {
    background-color: #000000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 997;
  }
  .close-shadow {
    display: none;
  }
  .show-shadow {
    display: block;
    opacity: 0.5;
    transition: all @transitionTime;
  }
}
.vaw-main-layout-container {
  height: 100%;
  box-sizing: border-box;
  transition: margin-left @transitionTime;
  .main-base-style {
    height: 100%;
    box-sizing: border-box;
    padding: 5px;
  }
  .main-base-light-theme {
    background-color: #f0f2f5;
  }
  .main-base-dark-theme {
    background-color: #333333;
  }
  .main-section {
    min-height: calc(100% - @footerHeight - 10px);
    overflow-x: hidden;
  }
  .fixed-nav-bar {
    position: fixed;
    top: 0;
    transition: width @transitionTime;
    z-index: 99;
  }
  .tab-bar-top {
    padding-top: @logoHeight;
  }
}

.scrollbar::-webkit-scrollbar {
  width: 0;
}
.main-layout-open-status {
  margin-left: @menuWidth;
}
.main-layout-close-status {
  margin-left: @minMenuWidth;
}
.nav-bar-open-status.fixed-nav-bar {
  width: calc(100% - @menuWidth);
}
.nav-bar-close-status.fixed-nav-bar {
  width: calc(100% - @minMenuWidth);
}
.nav-bar-open-status__ttb {
  width: 100%;
}

.main-layout {
  overflow-y: auto;
}
.main-layout_fixed-nav-bar {
  overflow-y: hidden;
  .main-base-style {
    overflow-y: auto;
  }
}

.main-layout_padding-top__0 {
  padding-top: 0;
}

.main-layout_padding-top__all {
  padding-top: calc(@logoHeight + @tabHeight);
}

.main-layout_padding-top__logo {
  padding-top: @logoHeight;
}

.vaw-main-layout-container {
  height: 100%;
  box-sizing: border-box;
  transition: margin-left @transitionTime;
  .main-base-style {
    height: 100%;
    box-sizing: border-box;
    padding: 5px;
  }
  .main-base-light-theme {
    background-color: #f0f2f5;
  }
  .main-base-dark-theme {
    background-color: #333333;
  }
  .main-section {
    min-height: calc(100% - @footerHeight - 10px);
    overflow-x: hidden;
  }
  .fixed-nav-bar {
    position: fixed;
    top: 0;
    transition: width @transitionTime;
    z-index: 99;
  }
  .tab-bar-top {
    padding-top: @logoHeight;
  }
}
.footer-wrapper {
  margin-top: 6px;
}
.is-mobile {
  .main-layout-open-status,
  .main-layout-close-status {
    margin-left: 0;
    transition: none;
  }
  .nav-bar-open-status,
  .nav-bar-close-status {
    width: 100%;
  }
}
</style>
